export default {
  data () {
    return {
      alarmAvgEchart: null,
      alarmAvgOption: {
        tooltip: {
          trigger: 'axis',
          confine: true,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          right: 0,
          itemWidth: 25,
          itemHeight: 2,
          padding: [7, 0, 0, 0],
          textStyle: {
            color: '#898989'
          },
          data: [{name: 'TSP', icon: 'rect'}, {name: 'PM10', icon: 'rect'}, {name: 'PM2.5', icon: 'rect'}]
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 0,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1日', '2日', '3日', '4日', '5日', '昨天', '今日'],
            axisLabel: {
              color: '#939393'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#e8e8e8',
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#a8c5ed'
              }
            }
          }
        ],
        yAxis: [
          {
            show: false,
            type: 'value',
            name: '',
            nameTextStyle: {
              color: '#a8c5ed'
            },
            axisLabel: {
              show: false,
              color: '#a8c5ed'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#214a60',
                width: 2
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#e8e8e8'
              }
            },
            position: 'right'
          }
        ],
        series: [{
          barWidth: 15,
          label: {
            show: true,
            color: '#898989',
            position: 'top'
          },
          itemStyle: {
            color: '#33cadb'
          },
          data: [],
          type: 'bar'
        }]
      }
    }
  },
  methods: {
    initAlarmAvg () {
      this.initWeek()
      this.initAlarmAvgTime()
      this.initAlarmData()
      this.alarmAvgOption.series[0].data = [...this.weekMap.values()]
      this.alarmAvgEchart = this.$Echarts.init(this.$refs.alarmAvg)
      this.alarmAvgEchart.setOption(this.alarmAvgOption)
    },
    initAlarmAvgTime () {
      this.alarmAvgOption.xAxis[0].data = []
      if (this.queryType === 2 || this.queryType === 3) {
        this.alarmAvgOption.xAxis[0].data = this.days
      }
    },
    initAlarmData () {
      this.stageData.forEach((item) => {
        this.weekMap.set(Number.parseInt(item.day), item.alarmavg)
      })
    }
  }
}
